<template>
	<view class="tools_list_component" :class="pagetype">
		<view class="tools_item" :class="{ jj_kt_a: _i > 0 }" v-for="(vv, _i) in showForm" :key="_i">
			<block v-if="vv.click_type == 'select' && vv.can_click">
				<!-- 下拉选项 -->
				<mypicker :range_index="vv.select_index" :range_array="vv.select_list" :item="vv" @change="mypicker_change($event, vv)">
					<!-- <picker @change="bindPickerChange" mode="selector" :value="index" :range="vv.select_list" range-key="key"> -->
					<view class="tools_item_content">
						<view class="item_img" v-if="vv.icon">
							<image class="icon" :src="vv.icon" mode="widthFix"></image>
						</view>
						<view class="item_info">
							<view class="title_left">
								<view class="title">
									{{ vv.view_tt }}
								</view>
								<view class="desc" v-if="vv.view_desc">
									{{ vv.view_desc }}
								</view>
							</view>
							<view class="title_right">
								<view class="tips ell" v-if="objJudge(keyForm[vv.form_key])">
									{{ back_key(vv) }}
								</view>
								<view class="user_tips ell" :class="vv.tips_status == 1 ? 'suc' : 'iswrong'" v-else-if="vv.tips">
									{{ vv.tips }}
								</view>

								<image class="jt" :class="{ ishide: !vv.can_click }" src="/static/images/jt_r.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</mypicker>
			</block>

			<block v-else>
				<view class="tools_item_content" @click="formClick(vv)">
					<view class="item_img" v-if="vv.icon">
						<image class="icon" :src="vv.icon" mode="widthFix"></image>
					</view>

					<view class="item_info">
						<view class="title_left">
							<view class="title">
								{{ vv.view_tt }}
							</view>
							<view class="desc" v-if="vv.view_desc">
								{{ vv.view_desc }}
							</view>
						</view>

						<view class="title_right">
							<block v-if="vv.click_type == 'switch'">
								<myswitch :item="vv" width="100" :switchon="back_on(vv)" @switch_click="switchClick"></myswitch>
							</block>

							<block v-else>
								<view class="tips ell" v-if="objJudge(keyForm[vv.form_key])">
									{{ back_key(vv) }}
								</view>
								<view class="user_tips iswrong" v-else-if="show_unbind" @click.stop="unbindClick(vv)">解绑</view>

								<view class="user_tips ell" :class="vv.tips_status == 1 ? 'suc' : 'iswrong'" v-else-if="vv.tips">
									{{ vv.tips }}
								</view>

								<image class="jt" :class="{ ishide: !vv.can_click }" src="/static/images/jt_r.png" mode="widthFix"></image>
							</block>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	name: 'myToolList',
	props: {
		showForm: {
			type: [Object, Array],
			default() {
				return [];
			},
		},
		keyForm: {
			type: [Object],
			default() {
				return {};
			},
		},
		keyForm_name: {
			type: [String],
			default() {
				return 'page_form';
			},
		},
		pagetype: {
			type: [String],
			default() {
				return 'mylist';
			},
		},
		show_unbind: {
			type: [Boolean],
			default: false,
		},
	},
	watch: {},
	data() {
		return {
			formupdate: true,
		};
	},
	mounted() {},
	methods: {
		back_on(vv) {
			return this.keyForm[vv.form_key];
		},
		back_key(vv) {
			let b = this.keyForm[vv.form_key];
			if (this.objJudge(vv.unit)) {
				b += vv.unit;
			}

			if (vv.form_key == 'function_setting_balance_mode') {
				// 均衡方式

				b = b == 1 ? '充电均衡' : '静态均衡';
			}

			return b;
		},

		mypicker_change(e, vv) {
			let _this = this;
			// console.log(_this.showForm);
			// console.log(vv);
			_this.$emit('change', e);
		},

		switchClick(v) {
			let _this = this;
			let { item } = v;
			// console.log(v);
			if (item.can_click) {
				_this.$emit('switch', v);
			}
		},

		formClick(item) {
			let _this = this;

			if (_this.objJudge(item.need_login)) {
				_this.zhudon_login(item.url);
				return;
			}
			if (_this.objJudge(item.url)) {
				_this.goweburl_f(item.url);
				return;
			}

			if (item.can_click && item.click_type != 'switch') {
				_this.$emit('formClick', {
					item,
					pagetype: _this.pagetype,
					form: _this.keyForm_name,
				});
			}
		},
		unbindClick(item) {
			let _this = this;
			_this.$emit('unbindClick', {
				item,
				form: _this.keyForm_name,
			});
		},
	},
};
</script>

<style lang="scss">
.tools_list_component {
	margin: 20rpx 30rpx;
	padding: 0 0 0 30rpx;
	background: #3f425a;
	border-radius: 10rpx;

	&.user_device {
		margin: 0rpx;

		.tools_item {
			max-height: 120rpx;

			.tools_item_content {
				padding: 20rpx 0;
				width: 100%;
				// height: 100%;
				display: flex;
				align-items: center;
			}

			.item_info {
				font-size: 32rpx;
			}
		}
	}

	.tools_item {
		// padding: 30rpx 0;
		// height: 100rpx;
		// min-

		&::after {
			background-color: #27283b;
		}

		.tools_item_content {
			padding: 30rpx 0;
			width: 100%;
			// height: 100%;
			display: flex;
			align-items: center;
		}

		.item_img {
			width: 58rpx;
			height: 58rpx;
			margin-right: 10rpx;
			flex-shrink: 0;
		}

		.item_info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex: 1;
			height: 100%;

			font-size: 28rpx;
			font-weight: 400;
			color: #ffffff;

			padding-right: 10rpx;

			.desc {
				margin-top: 6rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
			}

			.title_right {
				max-width: 360rpx;
				display: flex;
				align-items: center;

				.user_tips {
					position: relative;
					font-size: 24rpx;
					font-weight: 400;

					&::after {
						content: '';
						position: absolute;
						right: 50%;
						top: 50%;
						width: 100rpx;
						height: 100rpx;
						transform: translate(50%, -50%);
					}
					&.iswrong {
						color: #ff5656;
					}

					&.suc {
						color: #1fd5ca;
					}
				}
			}

			.jt {
				flex-shrink: 0;
				width: 20rpx;
				opacity: 1;
				margin-left: 10rpx;

				&.ishide {
					opacity: 0;
				}
			}
		}

		.tools_item_tt {
			padding-top: 34rpx;

			.line {
				width: 4rpx;
				height: 15rpx;
				background: #000000;
				border-radius: 2rpx;
				margin-right: 10rpx;
			}
		}
	}
}
</style>
